<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<script>
			function getData(url) {
				const pro = new Promise((resolve, reject) => {
					// 1. 创建 xhr 对象
					let xhr = new XMLHttpRequest()

					// 2. 配置请求方式和地址
					xhr.open('GET', url)

					// 3. 开始发送请求
					xhr.send()

					// 4. 接收结果
					xhr.onreadystatechange = function () {
						if (xhr.readyState !== 4) return
						if (xhr.readyState === 4 && xhr.status === 200) {
							resolve(xhr.responseText)
						} else {
							reject('服务器端错误')
						}
					}
				})

				return pro
			}

			console.dir(Promise)

			// 对象方法：Promise 这个对象自己调用的方法
			//   => .all()   并发处理多个异步请求，返回每一个异步请求的结果(等所有的都执行完，才返回每一个的结果)
			//   => .race()   并发处理多个异步请求，返回最快请求完的那个结果(只要有一个执行完，就返回结果)

			var p1 = getData('http://127.0.0.1:3000/a1')
			var p2 = getData('http://127.0.0.1:3000/a2')
			var p3 = getData('http://127.0.0.1:3000/a3')

			// Promise.all([p1, p2, p3]).then((data) => {
			// 	console.log(data) // ["Hello TOM!", "Hello JERRY!", "Hello SPIKE!"]
			// })

			Promise.race([p1, p2, p3]).then((data) => {
				console.log(data) // Hello TOM!
			})
		</script>
	</body>
</html>
